<script setup lang="jsx">
import { ref, watch } from 'vue'

const emits = defineEmits(['openRow'])
const dataLoading = ref(false)
const selectedRows = ref([])
const props = defineProps({
    list: Array,
    columns: Array,
    openRowList: {
        type: Array,
        default: () => []
    },
    showExpandIcon: {
        type: Boolean,
        default: false
    }
})

watch(props.list, newVal => {
    console.log(newVal)
    dataLoading.value = false
})

const openRow = (list, e) => {
    emits('openRow', { list, e })
}

</script>

<template>
    <div class="table">
        <slot name="top-btn"></slot>
        <t-table
            hover
            rowKey="id"
            v-model:selected-row-keys="selectedRows"
            :loading="dataLoading"
            :data="props.list"
            :columns="props.columns"
            :expandIcon="showExpandIcon"
            :expandedRowKeys="openRowList"
            @expandChange="openRow"
        >
            <template #option="{ row }">
                <slot name="option-table" :row="row"></slot>
            </template>
            <template #expandedRow="{ row }">
                <slot name="expanded-content" :row="row"></slot>
            </template>
        </t-table>
    </div>
</template>

<style scoped lang="scss">
.table {
    padding: 20px;

    > :deep .t-button {
        margin-bottom: 20px;
    }

    :deep .t-table {
        .t-table__header {
            tr {
                background-color: var(--td-bg-color-secondarycontainer);

                th {
                    color: var(--td-text-color-primary);
                }
            }
        }

        .t-table__body {
            tr {
                td {
                    border-bottom: 1px solid var(--td-component-stroke);

                    button {
                        padding: 0 6px;
                    }
                }
            }
        }
    }
}
</style>
